<template>
  <div class="newCard">
    <p class="titleadd">新增预警</p>
    <div class="cardmsg">
      <!--:inline="true"  -->
      <el-form
        :model="passForm"
        :rules="rules"
        ref="passForm"
        label-width="140px"
        class="addForm "
        :inline="true"
      >
        <el-form-item label="选择小区" prop="CID" class="words">
          <el-select v-model="passForm.CID" filterable placeholder="请选择" clearable>
            <el-option
              v-for="item in villageList"
              :key="item.CID"
              :label="item.name"
              :value="item.CID"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="预警天数" prop="day" class="words">
          <el-input placeholder="请输入内容" v-model="passForm.day" onkeyup="this.value=this.value.replace(/[^\d]/g,'')" clearable></el-input>
        </el-form-item>
        <el-form-item label="是否开启短信提示" prop="open" class="words">
          <el-switch
            v-model="passForm.open"
            :active-value=1
            active-text="开"
            :inactive-value=0
            inactive-text="关"
          ></el-switch>
        </el-form-item>
        <el-form-item label="预警民警" prop="policeName" class="words">
          <div class="minjinout">
            <span>姓名:</span>
            <el-input class="minjin" placeholder="请输入内容" v-model="passForm.policeName" clearable></el-input>
          </div>
          <div>
            <span>电话:</span>
            <el-input class="minjin" placeholder="请输入内容" v-model="passForm.policePhone" clearable></el-input>
          </div>
        </el-form-item>

        <el-form-item>
          <el-button @click="canaelSumbit">返回</el-button>
          <el-button type="primary" @click="submitForm('passForm')">立即创建</el-button>
          <el-button @click="resetForm('passForm')" type="warning" plain>重置</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
export default {

  data() {
      var checkMobile = (rule, value, cb) => {
      const regMobile = /^^1[0-9]{10}$/;
      if (regMobile.test(value)) {
        return cb();
      }
      cb(new Error("请输入合法的手机号"));
    };
    return {
      // 小区列表
      villageList: [],
      // 楼栋列表
      loudonglist: [],
      // 单元列表
      unitlist: [],
      // 查询的人员列表
      loadper: true,
      listPer: [{ label: "", PID: "" }],
      // 查询到的人员
      // 绑定的人员
      changeper: {
        person_id: "",
        pername: "",
      },
      // 人员类型
      persontypelist: [],
      passForm: {
        CID: "", //小区CID
        day: "", //门禁号
        policeName: "", //用户姓名
        policePhone: "", //人员类型
        type: 1,
        open: 1,
      },
      rules: {
        day: [{ required: true, message: "天数必填", trigger: "blur" }],
        CID: [{ required: true, message: "小区不能为空", trigger: "change" }],
        policeName: [
          { required: true, message: "民警姓名必填", trigger: "change" },
        ],
        policePhone: [
          { required: true, message: "民警电话必填", trigger: "blur" },
          { validator: checkMobile, trigger: "blur" }
        ],
      },
    };
  },

  mounted() {
    // this.$nextTick(() => {
    //   this.getnowdong();
    //   this.getnowunit();

    //   this.getnowper();
    // });

    this.getCommunityList();
    // let dictList = JSON.parse(sessionStorage.getItem("dictData"));
    // this.persontypelist = dictList.sys_person_type;
  },

  methods: {
    // 小区查询
    getCommunityList() {
          this.villageList = this.$store.state.village.villageList
    },

    changper(val) {
      // console.log(val, "显示的数据");
    },

    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          // card_add  addCard
          var param = Object.assign(this.passForm);
          var params = JSON.stringify(param);

          this.$api.warn
            .passBorder_configure(params)
            .then((res) => {
              if (res.code == 0) {
                this.$message({
                  type: "success",
                  message: "添加成功",
                });
                this.$refs[formName].resetFields();
                this.$emit("getMsg");
              } else {
                this.$message({
                  type: "info",
                  message: res.msg,
                });
              }
            })
            .catch((err) => {
              this.$message({
                type: "info",
                message: err.Msg,
              });
            });
        } else {
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    // 返回
    canaelSumbit() {
      this.$emit("getMsg");
    },
  },
};
</script>

<style lang="scss" scoped>
.newCard {
  .titleadd {
    line-height: 50px;
    padding: 0 20px;
    border-left: 5px solid rgb(30, 175, 243);
    margin-bottom: 30px;
  }
}
.addForm {
  padding: 20px 100px;
  // box-shadow: 2px 2px 5px 5px rgb(244, 248, 250);
  margin: 0 auto;
  width: 40%;
  //   display: flex;
  //   flex-wrap: wrap;
  //   justify-content: start;
  .el-form-item {
    width: 90%;
    margin-bottom: 50px;
    height: 40px;

    // min-width: 360px;
    &:nth-last-child(1) {
      width: 90%;
      text-align: center;
      margin-top: 50px;
    }
  
  }

  .el-form-item__content {
    width: 100%;
    .el-cascader {
      width: 330px;
    }
    .el-select {
      width: 330px;
    }
    .el-input {
      //   min-width: 300px;
      width: 330px;
      //   background: aqua;
    }
    .minjin {
      width: 290px;
    }
    .minjinout {
      margin-bottom: 10px;
    }
  }
  .el-form--inline .el-form-item__content {
    width: 300px !important;
  }
}

.el-date-editor.el-input,
.el-date-editor.el-input__inner {
  width: 100%;
}
.swictbtn {
  margin-right: 20px;
}

</style>